<template>
	<view class="common-tabbar">
		<u-tabbar zIndex="999" :value="current" activeColor="#007EFF" inactiveColor="#C4C4C4">
			<u-tabbar-item
				:text="item.text"
				v-for="(item, index) in tabbar"
				:key="index"
				@click="changeTabbar(item.pagePath)"
			>
				<template #inactive-icon>
					<image class="u-page__item__slot-icon" :src="item.iconPath"></image>
				</template>
				<template #active-icon>
					<image class="u-page__item__slot-icon" :src="item.selectedIconPath"></image>
				</template>
			</u-tabbar-item>
		</u-tabbar>
	</view>
</template>

<script setup lang="ts">
import $mUtils from '@/common/utils'
import store from '@/store'

defineProps({
	current: {
		type: [Number, String],
		default: 0
	}
})

const tabbar = computed(() => {
	return store.state.tabbar
})

function changeTabbar(url: string) {
	if (`/${getCurrentPages()[0].route}` != url) {
		$mUtils.pushTab(url)
	}
}

onMounted(() => {
	uni.hideTabBar()
})
</script>

<style lang="scss">
.u-page__item__slot-icon {
	width: 24px;
	height: 24px;
}
</style>
